<template>
  <div class="imgUpload">
    <div class="imgs" :class="{'bigSize': bigSize}" v-for="(item, index) in imgList" :key="index">
      <img :src="item" alt="截图">
      <em class="dele el-icon-circle-close" @click="dele(index)"></em>
    </div>
    <div class="upload" :class="{'bigSize': bigSize}" v-if="(imgList.length < max)">
      <el-upload :accept="['.png', '.jpg']" :show-file-list="false" action="" :http-request="requestUpload" :headers="headers">
        <div class="addImg">
          <i class="el-icon-plus"></i>
        </div>
      </el-upload>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import { uploadPromise, uploadImg } from '../../../assets/js/imgUpload.js'
export default {
  name: 'imgUpload',
  props: {
    imgList: {
      type: Array
    },
    max: {
      type: Number,
      default: 3
    },
    bigSize: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // imgList: []
    }
  },
  computed: {
    headers () {
      return {
        accesstoken: this.userToken,
        userAccountId: this.userInfo.sellerAccountId
      }
    },
    ...mapGetters([
      'userInfo',
      'userToken'
    ])
  },
  methods: {
    dele (index) {
      this.imgList.splice(index, 1)
    },
    requestUpload (config) {
      uploadPromise().then((res) => {
        uploadImg(res.data.data, config.file).then((urlData) => {
          this.imgList.push(urlData.res.requestUrls[0].split('?')[0])
        }).catch((err) => {
          console.error(err)
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        })
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.imgUpload
  display flex
  >div
    width 60px
    height 60px
    border 1px solid #DCDFE6
    border-radius 4px
    text-align center
    line-height 60px
    margin-right 10px
    &:last-child
      margin-right 0
  >.bigSize
    width 200px
    height 200px
    line-height 200px
    .addImg
      width 200px
      height 200px
      font-size 30px
    .dele
      font-size 30px
  .imgs
    position relative
    img
      width 100%
      height 100%
      border-radius 4px
    em
      position absolute
      top -10px
      right -10px
      font-size 20px
      cursor pointer
  .upload
    display inline-block
    vertical-align middle
  .addImg
    width 60px
    height 60px
    font-size 20px
</style>
